<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>还书</title>
    <!--引入vue-->
    <script src="../../js/vue.js"></script>
    <!--引入Element-->
    <script src="../../js/index.js"></script>
    <link rel="stylesheet" href="../../css/index.css">
    <!--引入axios-->
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/request.js"></script>
</head>
<body>
<div id="app">
    <el-button type="primary" @click="getBookTableData">刷新</el-button>
    <div>
        <el-table
                :data="tableData"
                height="650"
                border
                style="width: 100%">

            <el-table-column
                    align="center"
                    prop="bookName"
                    label="图书名称"
                    width="250">
            </el-table-column>

            <el-table-column
                    align="center"
                    prop="author"
                    label="作者">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="publish"
                    label="出版社"
                    width="150">
            </el-table-column>

            <el-table-column
                    align="center"
                    prop="language"
                    label="语言">
            </el-table-column>

            <el-table-column
                    align="center"
                    prop="price"
                    label="价格">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="借出日期">
                <template slot-scope="scope">
                    {{ formatTimestamp(scope.row.lend_date) }}
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="应还日期">
                <template slot-scope="scope">
                    {{ formatTimestamp(scope.row.back_date) }}
                </template>
            </el-table-column>

            <el-table-column
                    align="center"
                    label="图书状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.flag===0" type="info">未还</el-tag>
                    <el-tag v-else-if="scope.row.flag===1" type="success">已还</el-tag>
                    <el-tag v-else type="warning">超期</el-tag>
                </template>
                <el-tag type="success">已还</el-tag>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.lossflag ===1" type="info">挂失中</el-tag>

                    <el-button v-if="scope.row.lossflag !==1" type="success" @click="returnBook(scope.row)"
                               size="small">归还
                    </el-button>
                    <el-button v-if="scope.row.lossflag !==1" type="success" @click="renewalOfLoan(scope.row)"
                               size="small">续借
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                //表格数据
                tableData: [],
            }
        },
        created() {
            this.getBookTableData();
        },
        methods: {
            async getBookTableData() {
                await $axios.get('/lendList?m=getReaderBookList').then(res => {
                    if (res.code === 1) {
                        this.tableData = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            },
            //归还
            returnBook(row) {
                console.log(row)
                this.$confirm('是否归还该图书?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 调用方法
                    $axios.get('/lendList?m=returnBook&ser_num=' + row.ser_num).then(res => {
                        if (res.code === 1) {
                            this.$message({
                                type: 'success',
                                message: '归还成功!'
                            });
                        }
                    });
                    // 刷新
                    this.getBookTableData();
                });
            },
            //续借
            renewalOfLoan(row) {
                console.log(row)
                this.$confirm('是否续借该图书?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 调用方法
                    $axios.get('/lendList?m=renewalOfLoan&ser_num=' + row.ser_num).then(res => {
                        if (res.code === 1) {
                            this.$message({
                                type: 'success',
                                message: '续借成功!'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                    });
                    // 刷新
                    this.getBookTableData();
                });
            },


            //时间戳转换
            formatTimestamp(timestamp) {
                const date = new Date(timestamp); // 使用时间戳创建 Date 对象

                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1，然后补零
                const day = String(date.getDate()).padStart(2, '0'); // 补零
                // const hours = String(date.getHours()).padStart(2, '0'); // 补零
                // const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
                // const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零
                // 构建日期时间字符串
                // return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
                return `${year}-${month}-${day}`;
            },
        }
    })
</script>

</body>
</html>